<template>
    <div class="element">
        <div class="left">
            <Menu active-name="1">
                <MenuItem name="1">
                    <Icon type="document-text"></Icon>
                    模型管理
                </MenuItem>
            </Menu>
        </div>
        <div class="right">
            <div class="right_top">
                <router-link to="/admin_index/admin_saveUnit">
                    <Button type="primary">添加</Button>
                </router-link>
            </div>
            <table border="1">
                <tr>
                    <th>{{this.$t('unit_api.create_time')}}</th>
                    <th>{{this.$t('unit_api.format')}}</th>
                    <th>{{this.$t('unit_api.hash')}}</th>
                    <th>{{this.$t('unit_api.name')}}</th>
                    <th>{{this.$t('unit_api.tags')}}</th>
                    <th>{{this.$t('unit_api.type')}}</th>
                    <th>{{this.$t('unit_api.usable')}}</th>
                    <th>{{this.$t('unit_api.uv_mask')}}</th>
                    <th>操作</th>
                </tr>
                    <tr v-for="item in product">
                        <td>{{item.create_time}}</td>
                        <td>{{item.format}}</td>
                        <td>{{item.hash}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.tags}}</td>
                        <td>{{item.type}}</td>
                        <td>{{item.usable}}</td>
                        <td>
                            {{item.uv_mask || "Null"}}
                        </td>
                        <td>
                            <router-link :to="'/admin_index/element_details/' + item.hash">修改</router-link>
                            <router-view></router-view>

                            删除
                        </td>
                    </tr>
            </table>
            <div class="page">
                <template>
                    <Page :total="50" show-elevator @on-change="change"></Page>
                </template>
            </div>
        </div>

    </div>
</template>

<script>
    import {component} from '../../http/API/index'
    import {element_list} from '../../http/API/index'

    export default {
        name: "admin_element",
        data(){
            return{
                products: '',
                n: '10',
                page : '',
                product : '',
            }
        },
        methods:{
            change: function (page) {
                this.page = page;
                console.log(this.page)
                this.element_list()
            },
            //得到数据
            element_list(){
                element_list(this.page,this.n).then((res) => {
                    if (res.code === 20000) {
                        this.product = res.data;
                        console.log(this.products)
                    } else if(res.data = []) {
                        console.log("没有数据了");
                    }
                })
            }
        },

        created: function () {
            //ajax获取后台数据，这里就不做了获取的数据存储在  this.rongliang。
            this.element_list();
        },
    }
</script>

<style scoped>
    .element{
        width: 100%;
    }
    .left{
        float: left;
        width: 15.5%;
    }
    .right{
        float: right;
        width: 83%;
    }
    .right_top{
        margin-top: 10px;
    }
    table{
        margin-top: 30px;
        border-collapse:collapse;
    }
    th,td{
        text-align: center;
    }
    .right table td,.right table th{
        width: 7%;
        height: 50px;
        text-align: center;
    }
</style>